<template>
  <el-tabs v-model="activeTab" stretch>
    <el-tab-pane label="好友" name="friends">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>我的好友 ({{ friends.length }})</span>
            <el-button type="primary" @click="showAddFriendDialog = true">添加好友</el-button>
          </div>
        </template>

        <el-input
            v-model="friendSearch"
            placeholder="搜索好友..."
            clearable
            class="search-input"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>

        <el-empty v-if="filteredFriends.length === 0 && !loadingFriends" description="暂无好友" />
        <el-skeleton v-if="loadingFriends" :rows="5" animated />

        <div v-else class="friends-list">
          <el-scrollbar height="400px">
            <div v-for="friend in filteredFriends" :key="friend.id" class="friend-item">
              <el-avatar :src="friend.avatar || defaultAvatar" :size="50" />
              <div class="friend-info">
                <div class="friend-name">{{ friend.name }}</div>
                <div class="friend-last-msg">{{ friend.lastMessage || '暂无聊天记录' }}</div>
              </div>
              <div class="friend-actions">
                <el-button type="primary" circle @click="startChat(friend.id)">
                  <el-icon><ChatDotRound /></el-icon>
                </el-button>
                <el-button type="success" circle @click="callFriend(friend.id)">
                  <el-icon><Phone /></el-icon>
                </el-button>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </el-card>
    </el-tab-pane>

    <el-tab-pane label="群组" name="groups">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>我的群组 ({{ groups.length }})</span>
            <el-button type="primary" @click="showCreateGroupDialog = true">创建群组</el-button>
          </div>
        </template>

        <el-empty v-if="groups.length === 0 && !loadingGroups" description="暂无群组" />
        <el-skeleton v-if="loadingGroups" :rows="3" animated />

        <div v-else class="groups-list">
          <el-scrollbar height="400px">
            <div
                v-for="group in groups"
                :key="group.id"
                class="group-item"
                @click="enterGroup(group.id)"
            >
              <el-avatar :src="group.avatar || defaultGroupAvatar" :size="50" />
              <div class="group-info">
                <div class="group-name">{{ group.name }}</div>
                <div class="group-last-msg">{{ group.lastMessage || '暂无群消息' }}</div>
              </div>
              <div class="member-count">{{ group.memberCount }}人</div>
            </div>
          </el-scrollbar>
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>

  <!-- 添加好友对话框 -->
  <el-dialog v-model="showAddFriendDialog" title="添加好友" width="90%">
    <el-form :model="friendForm" label-width="100px">
      <el-form-item label="好友ID/手机号" required>
        <el-input v-model="friendForm.id" placeholder="请输入好友ID或手机号" />
      </el-form-item>
      <el-form-item label="验证信息">
        <el-input
            v-model="friendForm.message"
            type="textarea"
            placeholder="请输入验证信息"
            :rows="3"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="showAddFriendDialog = false">取消</el-button>
      <el-button type="primary" @click="addFriend">发送请求</el-button>
    </template>
  </el-dialog>

  <!-- 创建群组对话框 -->
  <el-dialog v-model="showCreateGroupDialog" title="创建群组" width="90%">
    <el-form :model="groupForm" label-width="100px">
      <el-form-item label="群组名称" required>
        <el-input v-model="groupForm.name" placeholder="请输入群组名称" />
      </el-form-item>
      <el-form-item label="群组描述">
        <el-input
            v-model="groupForm.description"
            type="textarea"
            placeholder="请输入群组描述"
            :rows="3"
        />
      </el-form-item>
      <el-form-item label="邀请好友">
        <el-checkbox-group v-model="groupForm.selectedFriends">
          <el-checkbox
              v-for="friend in friends"
              :key="friend.id"
              :label="friend.id"
          >
            {{ friend.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="showCreateGroupDialog = false">取消</el-button>
      <el-button type="primary" @click="createGroup">创建</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Search, ChatDotRound, Phone } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const activeTab = ref('friends')
const friends = ref([])
const groups = ref([])
const friendSearch = ref('')
const loadingFriends = ref(false)
const loadingGroups = ref(false)
const showAddFriendDialog = ref(false)
const showCreateGroupDialog = ref(false)
const friendForm = ref({
  id: '',
  message: '请求添加您为好友'
})
const groupForm = ref({
  name: '',
  description: '',
  selectedFriends: []
})
const defaultAvatar = ref('')
const defaultGroupAvatar = ref('')

const filteredFriends = computed(() => {
  return friends.value.filter(friend =>
      friend.name.toLowerCase().includes(friendSearch.value.toLowerCase()))
})

const loadFriends = () => {
  loadingFriends.value = true
  setTimeout(() => {
    friends.value = [
      {
        id: 1,
        name: '李四',
        avatar: '',
        isOnline: true,
        lastMessage: '最近身体怎么样？'
      },
      {
        id: 2,
        name: '王五',
        avatar: '',
        isOnline: false,
        lastMessage: '明天一起下棋吗？'
      },
      {
        id: 3,
        name: '赵六',
        avatar: '',
        isOnline: true,
        lastMessage: '记得按时吃药'
      },
      {
        id: 4,
        name: '钱七',
        avatar: '',
        isOnline: false,
        lastMessage: '社区有新活动'
      }
    ]
    loadingFriends.value = false
  }, 800)
}

const loadGroups = () => {
  loadingGroups.value = true
  setTimeout(() => {
    groups.value = [
      {
        id: 1,
        name: '夕阳红棋牌社',
        avatar: '',
        memberCount: 12,
        lastMessage: '张三: 明天下午2点活动室见'
      },
      {
        id: 2,
        name: '健康养生交流',
        avatar: '',
        memberCount: 24,
        lastMessage: '李四分享了健康食谱'
      },
      {
        id: 3,
        name: '社区舞蹈队',
        avatar: '',
        memberCount: 8,
        lastMessage: '王五: 本周五排练'
      }
    ]
    loadingGroups.value = false
  }, 800)
}

const addFriend = () => {
  if (!friendForm.value.id) {
    ElMessage.warning('请输入好友ID或手机号')
    return
  }

  const newFriend = {
    id: Date.now(),
    name: friendForm.value.id,
    avatar: '',
    isOnline: false,
    lastMessage: ''
  }

  friends.value.unshift(newFriend)
  showAddFriendDialog.value = false
  friendForm.value.id = ''
  ElMessage.success(`已发送好友请求给 ${newFriend.name}`)
}

const createGroup = () => {
  if (!groupForm.value.name) {
    ElMessage.warning('请输入群组名称')
    return
  }

  const newGroup = {
    id: Date.now(),
    name: groupForm.value.name,
    avatar: '',
    memberCount: 1 + groupForm.value.selectedFriends.length,
    lastMessage: '你创建了群组'
  }

  groups.value.unshift(newGroup)
  showCreateGroupDialog.value = false
  groupForm.value = {
    name: '',
    description: '',
    selectedFriends: []
  }
  ElMessage.success(`群组 ${newGroup.name} 创建成功`)
}

const startChat = (friendId) => {
  const friend = friends.value.find(f => f.id === friendId)
  ElMessage.info(`开始与 ${friend.name} 聊天`)
}

const callFriend = (friendId) => {
  const friend = friends.value.find(f => f.id === friendId)
  ElMessageBox.confirm(`确定要呼叫 ${friend.name} 吗？`, '确认呼叫', {
    confirmButtonText: '呼叫',
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
    ElMessage.info(`正在呼叫 ${friend.name}...`)
  })
}

const enterGroup = (groupId) => {
  const group = groups.value.find(g => g.id === groupId)
  ElMessage.info(`进入群组: ${group.name}`)
}

onMounted(() => {
  loadFriends()
  loadGroups()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-input {
  margin-bottom: 20px;
}

.friends-list, .groups-list {
  margin-top: 10px;
}

.friend-item, .group-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.group-item {
  cursor: pointer;
}

.friend-item:hover, .group-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.friend-info, .group-info {
  flex: 1;
  margin-left: 15px;
  min-width: 0;
}

.friend-name, .group-name {
  font-weight: 500;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-last-msg, .group-last-msg {
  font-size: 0.85rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-actions {
  display: flex;
  gap: 10px;
}

.member-count {
  font-size: 0.8rem;
  color: #666;
  background-color: #f0f0f0;
  padding: 3px 8px;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .el-dialog {
    width: 95%;
  }
}
</style>